<template>
  <van-sticky>
    <div class="navbar">
      <img src="../assets/logo.png" alt="">
      <div class="city" @click="goToCity">
        {{ $store.state.cityName }}<van-icon name="arrow-down" size="0.5" color="#6e6f6f" />
      </div>
      卖座电影
    </div>
  </van-sticky>
</template>

<script>
export default {
  name: 'NavBar',
  methods: {
    goToCity() {
      this.$router.push('/city')
    }
  }
}
</script>

<style scoped>
.navbar {
  position: relative;
  width: 100%;
  height: 50px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  color: #ff5f16;
  font-size: .20rem;
  border-bottom: 1px solid #ededed;
}
.city {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #191a1b;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  width: 25px;
  height: 25px;
  display: block;
}
</style>